<template>
    <div class="about">
        <div>
            <Navigationyounth />
        </div>

        <el-row :gutter="10">
            <el-col :xs="4" :sm="2" :md="4" :lg="4" :xl="4"
                ><div class="grid-content"></div>
            </el-col>
            <el-col :xs="16" :sm="20" :md="16" :lg="16" :xl="16"
                >
                
                <div class="grid-content bg-purple">
                    <div class="nav">
                        <span><Selectfrom @update="select" /></span>
                    </div>
                    <div>
                        <el-tabs v-model="activeName" style="width: 1024px">
                            <el-tab-pane label="综合" name="second">
                                <div>
                                    <span>
                                        <el-button
                                            size="small"
                                            id="123"
                                            v-hClick=""
                                            >综合排序</el-button
                                        >
                                        <el-button size="small" @click="clicks"
                                            >最多点击</el-button
                                        >
                                        <el-button size="small"
                                            >最多发布</el-button
                                        >
                                        <el-button size="small"
                                            >最多弹幕</el-button
                                        >
                                        <el-button size="small"
                                            >最多收藏</el-button
                                        >
                                        <el-collapse
                                            v-model="activeNames"
                                            @change="handleChange"
                                        >
                                            <el-collapse-item>
                                                <template slot="title">
                                                    <span
                                                        style="
                                                            margin-left: 930px;
                                                        "
                                                        >更多筛选</span
                                                    >
                                                </template>
                                                <div>
                                                    <span>
                                                        <el-button size="small"
                                                            >全部时长</el-button
                                                        >
                                                        <el-button size="small"
                                                            >10分钟以下</el-button
                                                        >
                                                        <el-button size="small"
                                                            >10-30分钟</el-button
                                                        >
                                                        <el-button size="small"
                                                            >30-60分钟</el-button
                                                        >
                                                        <el-button size="small"
                                                            >60分钟以上</el-button
                                                        >
                                                    </span>
                                                </div>
                                                <div>
                                                    <span>
                                                        <el-button size="small"
                                                            >全部类型</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('动画')
                                                            "
                                                            >动画</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('番剧')
                                                            "
                                                            >番剧</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('国创')
                                                            "
                                                            >国创</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('音乐')
                                                            "
                                                            >音乐</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('舞蹈')
                                                            "
                                                            >舞蹈</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('游戏')
                                                            "
                                                            >游戏</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('知识')
                                                            "
                                                            >知识</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('科技')
                                                            "
                                                            >科技</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('运动')
                                                            "
                                                            >运动</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('汽车')
                                                            "
                                                            >汽车</el-button
                                                        >
                                                        <el-button
                                                            size="small"
                                                            @click="
                                                                dance('生活')
                                                            "
                                                            >生活</el-button
                                                        >
                                                    </span>
                                                </div>
                                            </el-collapse-item>
                                        </el-collapse>
                                    </span>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="视频" name="first">
                                <div>
                                    <span>
                                        <el-button size="small"
                                            >综合排序</el-button
                                        >
                                        <el-button size="small"
                                            >最多点击</el-button
                                        >
                                        <el-button size="small"
                                            >最多发布</el-button
                                        >
                                        <el-button size="small"
                                            >最多弹幕</el-button
                                        >
                                        <el-button size="small"
                                            >最多收藏</el-button
                                        >
                                        <el-collapse
                                            v-model="activeNames"
                                            @change="handleChange"
                                        >
                                            <el-collapse-item>
                                                <template slot="title">
                                                    <span
                                                        style="
                                                            margin-left: 930px;
                                                        "
                                                        >更多筛选</span
                                                    >
                                                </template>
                                                <div>
                                                    <span>
                                                        <el-button size="small"
                                                            >全部时长</el-button
                                                        >
                                                        <el-button size="small"
                                                            >10分钟以下</el-button
                                                        >
                                                        <el-button size="small"
                                                            >10-30分钟</el-button
                                                        >
                                                        <el-button size="small"
                                                            >30-60分钟</el-button
                                                        >
                                                        <el-button size="small"
                                                            >60分钟以上</el-button
                                                        >
                                                    </span>
                                                </div>
                                                <div>
                                                    <span>
                                                        <el-button size="small"
                                                            >全部类型</el-button
                                                        >
                                                        <el-button size="small"
                                                            >动画</el-button
                                                        >
                                                        <el-button size="small"
                                                            >番剧</el-button
                                                        >
                                                        <el-button size="small"
                                                            >国创</el-button
                                                        >
                                                        <el-button size="small"
                                                            >音乐</el-button
                                                        >
                                                        <el-button size="small"
                                                            >舞蹈</el-button
                                                        >
                                                        <el-button size="small"
                                                            >游戏</el-button
                                                        >
                                                        <el-button size="small"
                                                            >知识</el-button
                                                        >
                                                        <el-button size="small"
                                                            >科技</el-button
                                                        >
                                                        <el-button size="small"
                                                            >运动</el-button
                                                        >
                                                        <el-button size="small"
                                                            >汽车</el-button
                                                        >
                                                        <el-button size="small"
                                                            >生活</el-button
                                                        >
                                                    </span>
                                                </div>
                                            </el-collapse-item>
                                        </el-collapse>
                                    </span>
                                </div>
                            </el-tab-pane>

                            <el-tab-pane label="番剧" name="third"
                                >角色管理</el-tab-pane
                            >
                            <el-tab-pane label="影视" name="fourth"
                                >定时任务补偿</el-tab-pane
                            >
                            <el-tab-pane label="直播" name="five"
                                >定时任务补偿</el-tab-pane
                            >
                            <el-tab-pane label="专栏" name="six"
                                >定时任务补偿</el-tab-pane
                            >
                            <el-tab-pane label="话题" name="seven"
                                >定时任务补偿</el-tab-pane
                            >
                            <el-tab-pane label="用户" name="eight"
                                >定时任务补偿</el-tab-pane
                            >
                        </el-tabs>
                        <!-- 视频列表 -->
                        <div
                            class="shortrent-cars clearfix"
                            style="width: 1080px"
                        >
                            <div
                                class="com-car-card card"
                                v-for="item in list"
                                :key="item.id"
                                @click="selectBreak(item.id)"
                                style="
                                    border: 1px solid #ebeef5;
                                    margin-top: 30px;
                                    border-radius: 5px;
                                "
                            >
                                <a href="#" class="thumbnail" target="_top">
                                    <img
                                        :src="url + item.header"
                                        :alt="item.title"
                                /></a>
                                <div class="content">
                                    <h5 class="title">
                                        <a href="#">{{ item.title }}</a>
                                    </h5>
                                    <p class="desc">
                                        <i
                                            class="iconfont icon-a-shijian2"
                                        />&nbsp;{{ item.date }}
                                        <i
                                            class="
                                                iconfont
                                                icon-shipinbofangyingpian2
                                            "
                                        />&nbsp;{{ item.Clicks }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <!-- 分页 -->
                        <div style="clear: both; text-align: center">
                            <el-pagination
                                background
                                layout="prev, pager, next"
                                :total="100"
                                @current-change="FPage"
                                @prev-click="prePage"
                                @next-click="nextPage"
                            >
                            </el-pagination>
                        </div>
                    </div></div
            ></el-col>

            <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4"
                ><div class="grid-content"></div
            ></el-col>
        </el-row>
    </div>
</template>

<script>
import Selectfrom from "../components/Selectfrom.vue";
import Navigationyounth from "../components/Navigationyounth.vue";
export default {
    components: {
        Navigationyounth: Navigationyounth,
        Selectfrom: Selectfrom,
    },
    directives: {
        hClick: {
            inserted(el, bingding) {
                //console.log(123);
                el.click();
            },
        },
    },
    data() {
        return {
            list: [],
            url: process.env.VUE_APP_API_URL,
            //折叠面板
            activeName: "second",
            activeNames: ["1"],
            // 卡片时间
            currentDate: new Date(),
            //翻页
            pager: {
                _page: 1,
                _limit: 15,
            },
            redio: "1",
        };
    },
    created() {
        if (this.$route.query.allData) {
            let b={q:""}
            let a =decodeURIComponent(this.$route.query.allData);
            b.q = a.replace("\"","").replace("\"","");
            
            //console.log(b);
            this.$api
                .__api_list_video_get(b)
                .then((response) => {
                    this.list = response;
                    //console.log(response);
                });
        } else {
            this.query();
        }
    },

    methods: {
        //查询方法
        select(v) {
            this.$api.__api_list_video_get(v).then((data) => {
                this.list = data;
            });
        },
        // 折叠面板
        handleChange(val) {
            //console.log(val);
        },
        //
        query() {
            this.$api.__api_list_video_get(this.pager).then((response) => {
                this.list = response;
                this.url = process.env.VUE_APP_API_URL;
                //console.log(this.url);
                //console.log(this.list);
            });
        },

        selectBreak(a) {
            let objData = JSON.stringify(a);
            this.$router.push({
                path: "/video",
                query: { allData: encodeURIComponent(objData) },
            });
            //console.log(objData);
        },

        clicks: function () {},
        //  舞蹈
        dance(label) {
            (this.list = []), (this.pager.v_label = label);
            this.$api.__api_list_video_get(this.pager).then((response) => {
                this.list = response;
            });
        },
        FPage(i) {
            this.pager._page = i;
            this.query();
        },
        nextPage() {
            this.pager._page++;
            this.query();
        },
        prePage() {
            this.pager._page--;
            this.query();
        },
    },
};
</script>
<style scoped>
.el-input__inner {
    height: 35px;
    width: 430px;
}
.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}
/* 综合biaoqian */
.el-tabs__item {
    padding-left: 85px;
    font-size: 16px;
}
/* 更多筛选 */
.el-collapse-item__header {
    margin-top: -52px;
    font-size: 11px;
}
/* 按钮 */
.el-button {
    border: 1px;
    margin-left: -10px;
}
.el-button:focus,
.el-button:hover {
    color: white;
    background-color: #00a1d6;
}

.el-collapse {
    border-top: 1px;
}
/* 卡片 */

.shortrent-cars .card {
    float: left;
    margin-left: 15px;
}

.com-car-card {
    width: 180px;
    height: 220px;
    display: block;
    position: relative;
}

a {
    margin: 0;
    padding: 3;
    font-size: 100%;
    vertical-align: baseline;
    text-decoration: none;
}

img {
    vertical-align: middle;
    border-style: none;
}

.com-car-card .thumbnail {
    padding: 0px;
    display: block;
    overflow: hidden;
    height: 130px;
    border-radius: 5px;
    border: 0px;
    background-color: #fafafa;
    border-color: white;
    transition: all 0.2s ease-out;
    margin-bottom: 10px;
}

.com-car-card .thumbnail :hover {
    transform: scale(1.01);
}
/* a.thumbnail:hover:{
		border-color: white;
	} */

.com-car-card .thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin-left: 0px;
}

.com-car-card .content {
    padding: 0 13px;
    height: 70px;
    overflow: hidden;
}

.com-car-card .title {
    margin-top: 0px;
    font-size: 15px;
    margin-bottom: 0px;
    overflow: hidden;
}

.com-car-card .title a {
    width: inherit;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #333;
    text-decoration: none;
}

.com-car-card .title a:hover {
    color: red;
}

.com-car-card .title {
    font-size: 15px;
    margin-bottom: 5px;
    overflow: hidden;
}

.com-car-card .desc {
    margin-top: 15px;
    font-size: 12px;
    color: #666;
    margin-bottom: 13px;
}

.com-car-card .desc span {
    color: #f63;
}

/* .com-car-card .price {
		color: #ff4d3b;
		font-size: 12px;
	} */

/* .com-car-card .price span {
		font-size: 18px;
		font-weight: 700;
	} */
</style>
